<template>
  <div id="departments" class="center">
    <div class="left">
      <ul>
        <li v-for="(item, index) in list" :key="index" class="hovers" :data-id="item.id">
          <router-link :to="{ name: '', params: { id: item.id } }">
            <span @mouseover="message(index)">{{ item.name }}</span>
            <!-- {{item.name}} -->
            <ul class="xia" >
              <li v-for="arry in item.items" :key="arry">
                <router-link :to="arry.urls">{{ arry.text }}</router-link>
              </li>
            </ul>
          </router-link>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import $ from "jquery";
import axios from "axios";
export default {
  name: "Hospitals",
  components: {},
  data: function () {
    return {
      list: [
        {
          id:""
        },
      ],
      tit: [{ t: "科" }, { t: "室" }, { t: "科" }, { t: "别" }],
      cl: [
        {
          listrow: [
            { urls: "/", txts: "间质性肺炎" },
            { urls: "/", txts: "咳喘" },
            { urls: "/", txts: "气胸" },
            { urls: "/", txts: "脓胸" },
            { urls: "/", txts: "肺结核" },
            { urls: "/", txts: "慢性支气管炎" },
            { urls: "/", txts: "慢性阻塞性肺气肿" },
            { urls: "/", txts: "支气管扩张" },
            { urls: "/", txts: "支气管哮喘" },
            { urls: "/", txts: "肺脓肿" },
            { urls: "/", txts: "慢性咽炎（梅核气）" },
            { urls: "/", txts: "打呼噜_鼾症" },
            { urls: "/", txts: "尘肺-矽肺" },
            { urls: "/", txts: "肺炎" },
            { urls: "/", txts: "肺气肿" },
            { urls: "/", txts: "隐源性机化性肺炎" },
          ],
        },
        {
          listrow: [
            { urls: "/", txts: "慢性咽炎（梅核气）" },
            { urls: "/", txts: "打呼噜_鼾症" },
            { urls: "/", txts: "尘肺-矽肺" },
            { urls: "/", txts: "肺炎" },
            { urls: "/", txts: "肺气肿" },
            { urls: "/", txts: "隐源性机化性肺炎" },
            { urls: "/", txts: "间质性肺炎" },
            { urls: "/", txts: "咳喘" },
            { urls: "/", txts: "气胸" },
            { urls: "/", txts: "脓胸" },
            { urls: "/", txts: "肺结核" },
            { urls: "/", txts: "慢性支气管炎" },
            { urls: "/", txts: "慢性阻塞性肺气肿" },
            { urls: "/", txts: "支气管扩张" },
            { urls: "/", txts: "支气管哮喘" },
            { urls: "/", txts: "肺脓肿" },
          ],
        },
      ],
    };
  },
  mounted: function () {
    $(function () {
      $(".xia").hide();
      $(".left>ul>li:first-child").addClass("hoverss");
      // $(".right .con span:first-child").addClass("hh")
      $(".con:not(:eq(0))").hide();
      $(".hovers").hover(
        function () {
          $(this).find(".xia").show();
          $(this).addClass("hoverss");
        },
        function () {
          $(this).find(".xia").hide();
          $(this).removeClass("hoverss");
          $("li:first-child").addClass("hoverss");
        }
      );
      $(".xia>li").hover(
        function () {
          console.log(this.id);
          $(".right .con").eq($(this).index()).show().siblings().hide();
        },
        function () {
          $(".con").eq($(this).index(0)).show().siblings().hide();
        }
      );
    });
    let that = this;
    axios
      .get("http://zhongyao.com/api/jibing/jibing1")
      .then((res) => {
        that.list = res.data.data;
        console.log(this.list)
      })
      .catch((error) => {
        console.log(error);
      });
  },
  methods: {
    message(e) {
      console.log(e);
      // let id1=this.$router.history.current.query.id
      // console.log(id1)
      // console.log('000');
      this.list.id = e;
      // console.log(this.list);
    },
  },
  created: function () {
    axios
      .get("http://zhongyao.com/api/jibing/jibing2" + this.list.id)
      .then((res) => {
        this.items = res.data.data;
        console.log(res);
      })
      .catch((error) => {
        console.log(error);
      });
  },
};
</script>
<style scoped>
a {
  color: #333333;
}
li {
  line-height: 50px;
  box-sizing: border-box;
  position: relative;
  height: 50px;
}
#departments {
  display: flex;
  justify-content: left;
  padding-bottom: 180px;
}
.xia li:hover {
  font-size: 18px;
}
.left > ul {
  margin-top: 200px;
}
.left {
  width: 23%;
  box-sizing: border-box;
}
.left > ul > li {
  padding-left: 40px;
  font-weight: bolder;
  font-size: 18px;
}
.hoverss {
  background: url("../assets/bag.png") left center no-repeat;
}
.left li .xia {
  position: absolute;
  background-color: brown;
  width: 200px;
  text-align: center;
  font-size: 14px;
  z-index: 1111;
  top: 0;
  right: 0;
}
.left li .xia li a {
  color: #fff;
}
.right {
  width: 65%;
  box-sizing: border-box;
}
.title {
  width: 100%;
  display: flex;
  justify-content: center;
  padding-top: 99px;
}
.title div {
  width: 70px;
  line-height: 70px;
  background-color: #a40100;
  text-align: center;
  font-size: 38px;
  font-family: "楷体";
  color: white;
  border-radius: 35px;
  margin-right: 10px;
}
.img {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
.con {
  width: 60%;
  margin: 0 auto;
  line-height: 46px;
  display: flex;
  justify-content: left;
  flex-wrap: wrap;
}
.con span {
  display: block;
  padding: 0px 18px;
}
.con span a {
  color: #9e290bff;
  font-size: 18px;
}
.con span a:hover {
  font-weight: bolder;
}
.hh {
  font-weight: bolder;
}
</style>